<template>
  <div>
    <el-row style="height: 300px;" :gutter="20">
      <el-col :span="12" style="height: 300px;">
        <div id="leftechartslogin" style="height: 288px;width: 690px;"></div>
      </el-col>
      <el-col :span="12">
        <div id="rightechartslogin" style="height: 288px;width: 690px;"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>时间范围： 今天 昨天 最近7天</el-col>
    </el-row>

    <el-row>
      <el-col>
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption"
                  :isSelection="false"
                  class="table">
        </cs-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[20, 40, 50, 60]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import echarts from 'echarts'
import CsTable from '@/components/cs-table'
export default {
  data() {
    return {
      currentTableData: [
        { time: '2019-05-06', name: '小龙龙', detail: '123', degree: 'III', IP: '192.168.32.14', source: '虚拟机' }
      ],
      tableLabel: [
        { label: '登录帐号', param: 'time', align: 'center', sortable: true, isShow: true },
        { label: '登录时间', param: 'name', align: 'center', isShow: true },
        { label: '源地址IP', param: 'detail', align: 'center', sortable: false, isShow: true },
        { label: '登录认证结果', param: 'degree', align: 'center', sortable: false, isShow: true },
        { label: '原始信息', param: 'IP', align: 'center', sortable: false, isShow: true }
      ],
      tableOption: {
        label: '追溯',
        width: '120',
        options: [
          { label: '追溯', type: 'primary', size: 'mini', icon: 'el-icon-search', methods: 'audit', auth: 'sys:group:update' }
        ]
      },
      pageNo: 1,
      pageSize: 20,
      total: 0
    }
  },
  components: {
    CsTable
  },
  mounted() {
    this.leftEcharts()
    this.rightEcharts()
  },
  methods: {
    leftEcharts() {
      let option1 = {
        title: {
          text: '最近7天登录趋势',
          textStyle: {
            fontSize: 12,
            color: '#878787'
          }
        },
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
        },
        grid: {
          top: '5%',
          left: '-5%',
          right: '3%',
          bottom: '9%'
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { // 坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.4)'
            }
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#d1e6eb',
              margin: 15
            }
          },
          axisTick: {
            show: false
          },
          data: ['2014', '2015', '2016', '2017', '2018', '2019']
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            margin: 20,
            textStyle: {
              color: '#d1e6eb'
            }
          },
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '注册总量',
          type: 'line',
          // smooth: true, // 是否平滑曲线显示
          // symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: '#53fdfe' // 线条颜色
            },
            borderColor: '#f0f'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,1)'
            }
          },
          tooltip: {
            show: false
          },
          areaStyle: { // 区域填充样式
            normal: {
              // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,150,239,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,253,252,0)'
              }], false),
              shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
              shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: [150, 200, 259, 360, 378, 450, 450]
        }]
      }
      var myChart1 = echarts.init(document.getElementById('leftechartslogin'))
      myChart1.setOption(option1)
    },
    rightEcharts() {
      let option2 = {
        backgroundColor: '#fff',
        tooltip: {},
        grid: {
          top: '15%',
          left: '5%',
          right: '2%',
          bottom: '8%'
        },
        legend: {
          data: ['登录源数据'],
          right: '1%',
          top: '1%',
          textStyle: {
            color: '#000',
            fontSize: 12
          }
        },
        xAxis: {
          data: ['1', '2', '3', '4', '5', '6'], // 横坐标
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0,
            // rotate: 25,
            textStyle: {
              color: '#000',
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#000',
              width: '1' // 坐标线的宽度
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#40A1EA', // 网格横线颜色
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: 12
              // 坐标值得具体的颜色
            }
          },
          axisLine: {
            show: false
          }
        },
        series: [{
          name: '登录源数据',
          type: 'bar',
          barWidth: 30,
          data: [30, 49, 26, 60, 26, 22], // 数据
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#06B5D7' }, // 柱图渐变色
                  { offset: 0.5, color: '#44C0C1' }, // 柱图渐变色
                  { offset: 1, color: '#71C8B1' } // 柱图渐变色
                ]
              )
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#71C8B1' }, // 柱图高亮渐变色
                  { offset: 0.7, color: '#44C0C1' }, // 柱图高亮渐变色
                  { offset: 1, color: '#06B5D7' } // 柱图高亮渐变色
                ]
              )
            }
          }
        }]
      }
      var myChart2 = echarts.init(document.getElementById('rightechartslogin'))
      myChart2.setOption(option2)
    },
    handleButton() {
    },
    handleSortChange() {
    },
    handleSelectionChange() {
    },
    // 分页监听
    handleSizeChange(newSize) {
      this.pageSize = newSize
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
    }
  }
}
</script>

<style scoped>
  .table {
    margin: 10px 0;
  }
</style>
